<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>yuxinyang.com</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">

		<!--标准mui.css-->
		<link rel="stylesheet" href="../css/mui.min.css">
		<!--App自定义的css-->
		<link rel="stylesheet" type="text/css" href="../css/app.css" />
	</head>

	<body>
		<div class="mui-content">
			<div id="slider" class="mui-slider">
				<div class="mui-slider-group mui-slider-loop">
					<!-- 额外增加的一个节点(循环轮播：第一个节点是最后一张轮播) -->
					<div class="mui-slider-item mui-slider-item-duplicate">
						<a href="#">
							<img src="../images/yuantiao.jpg">
							<p class="mui-slider-title">静静看这世界</p>
						</a>
					</div>
					<div class="mui-slider-item">
						<a href="#">
							<img src="../images/shuijiao.jpg">
							<p class="mui-slider-title">幸福就是可以一起睡觉</p>
						</a>
					</div>
					<div class="mui-slider-item">
						<a href="#">
							<img src="../images/muwu.jpg">
							<p class="mui-slider-title">想要一间这样的木屋，静静的喝咖啡</p>
						</a>
					</div>
					<div class="mui-slider-item">
						<a href="#">
							<img src="../images/cbd.jpg">
							<p class="mui-slider-title">美丽的风景</p>
						</a>
					</div>
					<div class="mui-slider-item">
						<a href="#">
							<img src="../images/yuantiao.jpg">
							<p class="mui-slider-title">静静看这世界</p>
						</a>
					</div>
					<!-- 额外增加的一个节点(循环轮播：最后一个节点是第一张轮播) -->
					<div class="mui-slider-item mui-slider-item-duplicate">
						<a href="#">
							<img src="../images/shuijiao.jpg">
							<p class="mui-slider-title">幸福就是可以一起睡觉</p>
						</a>
					</div>
				</div>
				<div class="mui-slider-indicator">
					<div class="mui-indicator mui-active"></div>
					<div class="mui-indicator"></div>
					<div class="mui-indicator"></div>
					<div class="mui-indicator"></div>
				</div>
			</div>
			<div class="title mui-btn-primary mui-dtpicker-header" style="padding-top: 2vw;padding-bottom: 2vw;padding-left: 4vw;">最新动态</div>
			<ul id="list" class="mui-table-view mui-table-view-chevron"></ul>
		</div>
		<script src="../libs/mui.min.js"></script>
		<script src="../libs/mui.lazyload.js"></script>
		<script src="../libs/mui.lazyload.img.js"></script>
		<script>
			mui.init({
				swipeBack: false
			});
			mui.plusReady(function() {
				//获得slider插件对象
				var gallery = mui('.mui-slider');
				gallery.slider({
					interval: 1000 //自动轮播周期，若为0则不自动播放，默认为0；
				});
				mui("#list").on('tap', 'li a', function(e) {
					var id = this.id;
					mui.toast(id);
				});
			});
			var createFragment = function(count) {
				var fragment = document.createDocumentFragment();
				var li;
				for(var i = 0; i < count; i++) {
					li = document.createElement('li');
					li.className = 'mui-table-view mui-media';
					li.innerHTML = '<div id="' + i + '" class="mui-card"><div class="mui-card-header mui-card-media"><img src="../images/logo.png" /><div class="mui-media-body">小丽 <p style = "font-size: 11px;"> 发表于 2016 - 06 - 31 15: 30 </p></div></div><a id="' + i + '" href = "javascript:;" ><div class = "mui-card-content" ><img data-lazyload="http://www.dcloud.io/hellomui/images/' + (i % 5 + 1) + '.jpg?version=' + Math.random() * 1000 + '" alt="" width="100%" style="height: 40vw;"/><div class = "mui-card-content-inner" style = "padding-top: 0;" ><p> 这里显示文章摘要， 让读者对文章内容有个粗略的概念... </p></div></div></a><div class = "mui-card-footer" ><a href = "javascript:;" class = "mui-card-link" > 赞 </a><a href = "javascript:;" class = "mui-card-link" > 评论 </a><a href = "javascript:;" class = "mui-card-link" > 更多 </a></div></div>';
					fragment.appendChild(li);
				}
				return fragment;
			};
			(function($) {
				var list = document.getElementById("list");
				list.appendChild(createFragment(50));
				$(document).imageLazyload({
					placeholder: '../images/cbd.jpg'
				});
			})(mui);
			/**
			 *获取新闻列表的数据 
			 */
			function getListInfo() {

			}
		</script>
	</body>

</html>